<script setup>
import {reactive, ref,onMounted} from 'vue'
import {get,post}  from '@/myaxios'
import { User, Histogram ,SwitchButton } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import router from '@/router'

const username = ref('jack')

const logout = async()=>{
    //清除前后端的缓存
    //清后端缓存
    let resp = await get("/logout",{})
    ElMessage.success(resp.data.msg);
    //清前端缓存
    sessionStorage.clear()
    router.push("/login")
}

onMounted(()=>{
    
    if(sessionStorage.loginUser){
        console.log(sessionStorage.loginUser);
        username.value = JSON.parse(sessionStorage.loginUser).username
    }else{
       // router.push("/login")
    }
})

</script>

<template>
   <el-row justify="end">
    <el-col class="titalPanel" :span="10">
        尚马二阶段陪玩系统后台项目
    </el-col>
    <el-col :span="5">
        <el-button-group class="ml-4">
            <el-button plain  color="#626aef" :icon="User">{{username}}</el-button>

            <el-button plain color="#626aef" :icon="Histogram" />
            <el-button plain color="#626aef" :icon="SwitchButton" @click="logout" />
        </el-button-group>
    </el-col>

   </el-row>
</template>

<style scoped>
    .titalPanel{
        font-size: 25px;
        color: lightslategray;
    }

</style>